<template>
  <div style="margin-left: 5px">
    <div style="margin-top: 10px">
      <div>
        <span class="el-form-item__label">{{ $t('message.EdzSegmentAutoConnectTool.query') }}：</span>
        <el-input v-model="params.pointCodeQuery" :placeholder="$t('message.EdzSegmentAutoConnectTool.inputCode')"
                  style="width: 200px;margin-right: 40px"></el-input>
        <el-checkbox v-model="params.selectUnlink" @change="changeStatus">
          {{ $t('message.EdzSegmentAutoConnectTool.onlyUnconnected') }}
        </el-checkbox>
      </div>
      <div style="margin-top: 10px">
        <el-button
            type="primary"
            size="small"
            @click="createConnection">
          {{ $t('message.EdzSegmentAutoConnectTool.link') }}
        </el-button>

        <el-button
            type="primary"
            size="small"
            @click="unlink">
          {{ $t('message.EdzSegmentAutoConnectTool.unlink') }}
        </el-button>

        <el-button
            type="primary"
            size="small"
            @click="exportExcelData">
          {{ $t('message.EdzSegmentAutoConnectTool.export') }}
        </el-button>
      </div>
      <div style="margin-top: 10px;">
        <el-table ref="sectionList"
                  :data="params.bundleSegments"
                  highlight-current-row
                  @selection-change="handleCurrentChange"
                  tooltip-effect="dark"
                  height="400"
                  border size="small">
          <el-table-column
              type="selection"
              width="50">
          </el-table-column>
          <el-table-column
              type="index"
              :label="$t('message.EdzSegmentAutoConnectTool.no')"
              width="50">
          </el-table-column>
          <el-table-column prop="modelMBS"
                           label="MBS"
                           min-width="100">
          </el-table-column>
          <el-table-column prop="nodeType"
                           :label="$t('message.EdzSegmentAutoConnectTool.nodeType')"
                           min-width="80">
          </el-table-column>
          <el-table-column prop="pointCode"
                           :label="$t('message.EdzSegmentAutoConnectTool.pointCode')"
                           min-width="100">
          </el-table-column>
          <el-table-column prop="docName"
                           :label="$t('message.EdzSegmentAutoConnectTool.docName')"
                           v-if="params.isCommonAssembly"
                           min-width="100">
          </el-table-column>
          <el-table-column prop="pointCoordinateX"
                           :label="$t('message.EdzSegmentAutoConnectTool.pointCoordinateX')"
                           min-width="80">
          </el-table-column>
          <el-table-column prop="pointCoordinateY"
                           :label="$t('message.EdzSegmentAutoConnectTool.pointCoordinateY')"
                           min-width="80">
          </el-table-column>
          <el-table-column prop="pointCoordinateZ"
                           :label="$t('message.EdzSegmentAutoConnectTool.pointCoordinateZ')"
                           min-width="80">
          </el-table-column>
          <el-table-column prop="faceX"
                           :label="$t('message.EdzSegmentAutoConnectTool.faceX')"
                           min-width="80">
          </el-table-column>
          <el-table-column prop="faceY"
                           :label="$t('message.EdzSegmentAutoConnectTool.faceY')"
                           min-width="80">
          </el-table-column>
          <el-table-column prop="faceZ"
                           :label="$t('message.EdzSegmentAutoConnectTool.faceZ')"
                           min-width="80">
          </el-table-column>
          <el-table-column prop="linkedState"
                           :label="$t('message.EdzSegmentAutoConnectTool.linkedState')"
                           min-width="80">
          </el-table-column>
          <el-table-column prop="linkedRowCode"
                           :label="$t('message.EdzSegmentAutoConnectTool.linkedRowCode')"
                           min-width="80">
          </el-table-column>
        </el-table>
      </div>
      <div class="btn">
        <!--        <el-button-->
        <!--            type="primary"-->
        <!--            size="small"-->
        <!--            @click="test">-->
        <!--          test-->
        <!--        </el-button>-->
        <el-button
            type="primary"
            size="small"
            @click="delLines">
          {{ $t('message.EdzSegmentAutoConnectTool.delete') }}
        </el-button>
        <el-button
            type="primary"
            size="small"
            @click="beforeAllDelete">
          {{ $t('message.EdzSegmentAutoConnectTool.deleteAll') }}
        </el-button>

        <el-button
            size="small"
            @click="cancel">
          {{ $t('message.EdzSegmentAutoConnectTool.cancel') }}
        </el-button>
      </div>
      <el-dialog
          :title="$t('message.EdzSegmentAutoConnectTool.deleteTip')"
          :visible.sync="dialogVisible"
          width="30%"
          >
        <span>{{ $t('message.EdzSegmentAutoConnectTool.isDeleteAll') }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="delAllLines">{{ $t('message.EdzSegmentAutoConnectTool.confirm') }}</el-button>
          <el-button @click="dialogVisible = false">{{ $t('message.EdzSegmentAutoConnectTool.cancel') }}</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import DialogMixin from "../DialogMixin";
import {edzSegmentAutoConnectCommand} from "../../../command/EdzSegmentAutoConnectCommand";

export default {
  mixins: [DialogMixin],
  data() {
    return {
      params: {
        bundleSegments: [],
        isCommonAssembly: false,
        selectUnlink: false,
        pointCodeQuery: ""
      },
      selectionData: [],
      dialogVisible: false
    }
  },

  mounted() {
    edzSegmentAutoConnectCommand.init(900, 900, 540, async () => {
      // 获取全部数据
      await this.getPointsData();
    });
  },

  methods: {
    changePluginContainerHeight() {
      edzSegmentAutoConnectCommand.changePluginContainerHeight({
        minWidth: 900,
        maxHeight: 540,
        width: 1200
      })
    },

    /**
     * 删除前判断
     */
    beforeAllDelete() {
      if (this.params.bundleSegments?.length === 0) {
        edzSegmentAutoConnectCommand.eventBusAlertMsg(this.$t('message.EdzSegmentAutoConnectTool.none'), 'warning')
        return;
      }
      // 如果存在已连接，则不允许删除
      if (this.params.bundleSegments.find(j => j.linkedState === "已连接")) {
        edzSegmentAutoConnectCommand.eventBusAlertMsg(this.$t('message.EdzSegmentAutoConnectTool.canDelete'), 'warning')
        return;
      }
      this.dialogVisible = true;
    },

    /**
     * 选中数据
     * @param row
     */
    handleCurrentChange(row) {
      this.selectionData = row;
    },

    /**
     * 获取数据
     * @returns {Promise<void>}
     */
    async getPointsData() {
      await edzSegmentAutoConnectCommand.getPointsViewData();
      this.params.bundleSegments = edzSegmentAutoConnectCommand.viewData;
      this.params.isCommonAssembly = !edzSegmentAutoConnectCommand.docInfo.docType
          && !edzSegmentAutoConnectCommand.docInfo.pointsDocId;
    },

    /**
     * 导出Excel
     */
    exportExcelData() {
      edzSegmentAutoConnectCommand.exportExcelData();
    },

    /**
     * 创建连接
     */
    async createConnection() {
      if (this.selectionData.length === 0) {
        edzSegmentAutoConnectCommand.eventBusAlertMsg(this.$t('message.EdzSegmentAutoConnectTool.selectPoint'), 'warning')
        return;
      }
      await edzSegmentAutoConnectCommand.createWires(this.selectionData.map(j => j.id))
      //edzSegmentAutoConnectCommand.eventBusAlertMsg(this.$t('message.EdzSegmentAutoConnectTool.handleSuccess'), 'success')
      await this.getPointsData();
    },

    /**
     * 删除勾选数据
     */
    delLines() {
      if (this.selectionData.length === 0) {
        edzSegmentAutoConnectCommand.eventBusAlertMsg(this.$t('message.EdzSegmentAutoConnectTool.selectDeletePoint'), 'warning')
        return;
      }
      // 如果存在已连接，则不允许删除
      if (this.selectionData.find(j => j.linkedState === "已连接")) {
        edzSegmentAutoConnectCommand.eventBusAlertMsg(this.$t('message.EdzSegmentAutoConnectTool.canDelete'), 'warning')
        return;
      }
      edzSegmentAutoConnectCommand.deleteConnections(this.selectionData.map(j => j.id)).then(() => {
        edzSegmentAutoConnectCommand.eventBusAlertMsg(this.$t('message.EdzSegmentAutoConnectTool.handleSuccess'), 'success')
        this.getPointsData();
      })
    },

    /**
     * 删除全部数据
     */
    delAllLines() {
      this.dialogVisible = false;
      edzSegmentAutoConnectCommand.deleteConnections([]).then(() => {
        edzSegmentAutoConnectCommand.eventBusAlertMsg(this.$t('message.EdzSegmentAutoConnectTool.handleSuccess'), 'success')
        this.getPointsData();
      })
    },

    /**
     * 修改连接状态
     */
    changeStatus() {
      if (this.params.selectUnlink) {
        this.params.bundleSegments = this.params.bundleSegments.filter(j => j.linkedState === "未连接");
      } else {
        this.params.bundleSegments = edzSegmentAutoConnectCommand.viewData;
      }
    },

    /**
     * 断开连接
     */
    unlink() {
      if (this.selectionData.length === 0) {
        edzSegmentAutoConnectCommand.eventBusAlertMsg(this.$t('message.EdzSegmentAutoConnectTool.selectUnlinkPoint'), 'warning')
        return;
      }
      // 只能选择已连接的点
      if (this.selectionData.find(j => j.linkedState !== "已连接")) {
        edzSegmentAutoConnectCommand.eventBusAlertMsg(this.$t('message.EdzSegmentAutoConnectTool.onlyLinkPoint'), 'warning')
        return;
      }
      edzSegmentAutoConnectCommand.unLinkConnection(this.selectionData.map(j => j.id)).then(() => {
        //edzSegmentAutoConnectCommand.eventBusAlertMsg(this.$t('message.EdzSegmentAutoConnectTool.handleSuccess'), 'success')
        this.getPointsData();
      })
    },

    /**
     * 关闭窗口
     */
    cancel() {
      edzSegmentAutoConnectCommand.closeActiveCmd();
    },

    test() {
      edzSegmentAutoConnectCommand.test();
    }
  },
  watch: {
    "params.pointCodeQuery"() {
      let tempSegments = edzSegmentAutoConnectCommand.viewData;
      if (this.params.selectUnlink) {
        tempSegments = edzSegmentAutoConnectCommand.viewData.filter(j => j.linkedState === "未连接");
      }
      if (this.params.pointCodeQuery) {
        this.params.bundleSegments = tempSegments
            .filter(j => j.pointCode.includes(this.params.pointCodeQuery))
      } else {
        this.params.bundleSegments = tempSegments;
      }
    }
  }
}

</script>
<style scoped>
>>> .el-table__body-wrapper {
  height: 320px;
}

>>> ::-webkit-scrollbar {
  height: 100px;
}

>>> ::-webkit-scrollbar-thumb {
  border-radius: 5px;
}

>>> .el-table .el-table__header .cell {
  font-size: 13px;
}

>>> .el-table__body-wrapper::-webkit-scrollbar {
  scrollbar-bottom: 50px;
  height: 8px;
}

>>> .el-table .el-table__fixed {
  height: auto !important;
  bottom: 6px !important;
}

>>> .el-table td, >>> .el-table th {
  padding: 0;
}

>>> .el-table .cell, >>> .el-table--border td:first-child .cell, >>> .el-table--border th:first-child .cell {
  padding: 3px 6px;
}

>>> .el-table th {
  background-color: var(--bg-color8) !important;
  color: var(--text-color1)
}

>>> .el-table__empty-text {
  line-height: 30px;
}

>>> .el-table__empty-block {
  min-height: 30px;
}

>>> .el-divider {
  margin: 15px 0;
}

.settingsMenu .el-form-item {
  margin-bottom: 10px;
}

>>> .el-form-item__label {
  line-height: 25px;
}

>>> .el-radio {
  padding: 10px 0;
}

>>> .el-table {
  color: var(--text-color1);
}

>>> .el-table tr {
  background-color: var(--bg-color1) !important;
}

>>> .el-table__fixed-right::before, >>> .el-table__fixed::before {
  background-color: transparent;
}

>>> .el-table__body tr.current-row > td {
  background-color: transparent
}

>>> .el-table__body tr.current-row {
  box-shadow: 0 0 6px var(--bg-color5) inset;
  background-color: var(--bg-color7) !important;
  border-radius: 4px;
}

>>> .el-table__body tr:hover > td, >>> .hover-row > td {
  background-color: var(--bg-color7) !important;
}

>>> .el-table--border td, >>> .el-table--border th, >>> .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid var(--border-color3)
}

>>> .el-table--border th.gutter:last-of-type {
  border-bottom: 1px solid var(--border-color3);
}

>>> .el-table--border th, >>> .el-table__fixed-right-patch {
  border-bottom: 1px solid var(--border-color3)
}

>>> .el-table__fixed-footer-wrapper tbody td {
  border-top: 1px solid var(--border-color3);
  background-color: var(--bg-color1);
  color: #606266
}

>>> .el-table__footer-wrapper td {
  border-top: 1px solid var(--border-color3);
}

>>> .el-table__body-wrapper .el-table--border.is-scrolling-right ~ .el-table__fixed-right {
  border-left: 1px solid var(--border-color3);
}

>>> .el-table, >>> .el-table__expanded-cell {
  background-color: var(--bg-color1);
}

>>> .el-table__fixed-right-patch {
  background-color: var(--bg-color1);
}

>>> .el-table__footer-wrapper tbody td, >>> .el-table__header-wrapper tbody td {
  background-color: var(--bg-color1);
}

>>> .el-table-filter {
  border: 1px solid var(--border-color3);
  background-color: var(--bg-color1);
}

>>> .el-table th {
  color: var(--text-color1);
}

>>> .el-table--border::after, >>> .el-table--group::after, >>> .el-table::before {
  background-color: transparent
}

>>> .el-table td, >>> .el-table th.is-leaf {
  border-bottom: 1px solid var(--border-color3);
}

>>> .el-table--border, >>> .el-table--group {
  border: 1px solid var(--border-color3);
}

>>> .el-pagination__total, >>> .el-pagination__jump {
  color: var(--text-color1);
}

>>> .el-tag.el-tag--info {
  border: 1px solid var(--border-color3);
  background-color: var(--bg-color1);
  color: var(--text-color1);
}

>>> .el-pagination.is-background .el-pager li:not(.disabled) {
  background-color: var(--bg-color3);
  color: var(--text-color1);
}

>>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #409EFF;
  color: #FFF;
}

>>> .el-pagination button {
  background-color: var(--bg-color3) !important;
  color: #C0C4CC !important;
}

>>> .el-pagination button:disabled {
  color: #606266 !important;
}

>>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  border-bottom: 1px solid #409EFF !important;
  background-color: var(--bg-color3);
  color: #409EFF;
}

>>> .el-radio-button__inner {
  border-radius: 0px !important;
  border: 0px !important;
  background-color: var(--bg-color1);
  color: var(--text-color1);
}

.attributeSelect >>> .el-select__tags, .typeAccording2 >>> .el-select__tags {
  display: none;
}

>>> .el-table .cell.el-tooltip {
  min-width: 1px !important;
}

>>> .el-table__row .cell .attr-content {
  display: flex;
  justify-content: center;
  min-height: 29px;
}

>>> .el-table__row .cell .attr-content span {
  align-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>